<script type="text/javascript" src="<?=dirname($__URL__) ?>/js/jquery.timeago.js"></script>
<style type="text/css">
	section.emails{
		background-color: #DFE6EC;
		border-radius: 15px 15px 15px 15px;
		margin: 15px;
		padding: 5px;
	}
	.emails .item{
		border: 1px solid #999;
		border-radius: 10px;
		padding:5px 10px;
		background-color:#fff;
		margin-bottom:10px;
	}
	.emails form + .item
	{
		border-color:#000;
	}
	.emails .item h3{
		background-color: #DFE6EC;
		border-bottom: 1px solid #6799CC;
		border-radius: 3px 3px 3px 3px;
		font-family: verdana;
		font-size: 0.7em;
		margin: 0;
		overflow: hidden;
		padding: 0 5px;
		position: relative;
	}
	.emails .item h3 span,
	.emails .item h3 time
	{
		
	}
	.emails .item h3 time{
		position: absolute;
		right:5px;
	}
	.emails .item p,
	.emails .item textarea
	{
		color:#333;
		font-family: verdana;
		font-size:0.7em;
		text-align: justify;
		padding:0px 15px;
		display:block;
		white-space: pre-line;
	}
	/*Formulario de nuevo mensaje*/
	.emails .item h3 input
	{
		font:inherit;width:90%;
	}
	.emails .item textarea{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
#form_mensaje_first{
	display: none;
}
#button_mensaje_first{

}
</style>
<style type="text/css">
	.emails .item h3[user-email='<?=XAUTH::$user->email?>']{
		color:green;
	}
</style>
<section class="emails" id="section_emails">
	<button id="button_mensaje_first">Enviar Nuevo Mensaje</button>
	<form action="" method="post" id="form_mensaje_first">
		<div class="item">
			<h3><input type="text" name="mensajes[asunto]" required="required"/></h3>
			<textarea name="mensajes[mensaje]" id="" required="required" ></textarea>
			<button type="submit">Enviar Consulta</button>
		</div>
	</form>
	<!--<div class="item">
		<h3>
			<span>julio colonia</span>
			<time>12/06/12 - 15 :03</time>
		</h3>
		<p>message</p>
		<h3>
			<span>Conversation</span>
			<time>12/06/12 - 15 :03</time>
		</h3>
		<p>message</p>
	</div>
	<script type="text/javascript">jQuery("abbr.timeago").timeago();</script>
	-->
<?php foreach($MENSAJES as $m):?>
	<div class="item" data-id="<?=$m['mensaje_id']?>">
		<h3 user-email="<?=$m["email"]?>">
			<span><?=$m["email"]?> &raquo; <?=$m['asunto']?></span>
			<time datetime="<?=$m['datetime']?>"><?=$m['fecha']?></time>
		</h3>
		<p><?=$m['mensaje']?></p>
		<a class="show_all" href="#" onclick="mostrarConversacion('<?=$m['mensaje_id']?>');return false;" id="mostrar_todo_<?=$m['mensaje_id']?>">Mostrar toda la conversacion</a>
		<a href="#" onclick="responderMensaje('<?=$m['mensaje_id']?>',this);return false;">otro mensaje</a>
	</div>
<?php endforeach;?>
	
</section>
<script type="text/javascript">
$(window).ready(function(){
	
	$('#section_emails > .item .show_all')[0].click();
	$("time[datetime]").timeago();
	$('#button_mensaje_first').on('click',function(){
		$(this).css("display","none");
		$('#form_mensaje_first').css("display",'block'); 
	});
});
setInterval(function(){
	$("time[datetime]").timeago();
},60*1000);
	function responderMensaje($id,element)
	{
		$(element).replaceWith('\
		<form action="" method="post">\
		<h3><input type="text" name="mensajes[asunto]" required="required"/></h3>\
		<input type="hidden" name="parent_mensaje_id" value="'+ $id +'" />\
		<textarea name="mensajes[mensaje]" id="" required="required" ></textarea>\
		<button type="submit">Enviar Consulta</button></form>');
	}
	function mostrarConversacion(id)
	{
		$.getJSON('<?=URI::newController(ROUTER,'mensajes','_getMessages','')->path('request.php')?>'+id,
		function(data)
		{
			mostrar_los_mensajes(id,data)
		});
	}

	
	function mostrar_los_mensajes(id,data)
	{
		var html = '';
		
		//for(fila in data)
		$.each(data,function(index,fila)
		{
			html = html + '\
	<h3 user-email="'+fila.email+'">\
		<span>'+fila.email+' &raquo; '+fila.asunto+'</span>\
		<time datetime="' + fila.datetime +'">'+fila.fecha+'</time>\
	</h3>\
	<p>'+ fila.mensaje +'</p>';
		});
		$('#mostrar_todo_' + id).replaceWith(html);
		$("time[datetime]").timeago();
	}
	
</script>